import React, { memo, useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import './style.less';

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

export default memo(function MyLineEchart(props) {
  const chartRef = useRef();

  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    const optionList = [];
    const dataList = [];
    if (props.dataList[0]) {
      for (let item of props.dataList) {
        optionList.push(item.name);
        dataList.push(item.goodsCount);
      }
    }
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: optionList,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: dataList,
          type: 'line',
          areaStyle: {},
        },
      ],
    };
    myChart.setOption(option);
  }, [props]);

  return <div className="my-line-echart" ref={chartRef}></div>;
});
